<!--推力圆柱与推力滚针轴承    -->
<template>
    <div class="all">
        <a-row style="width: 100%;height: 100%">
            <a-col span="11" style="height: 100%">
                <div class="left">
                    <div style="width: 100%;height: 3%;background: #D7D7D7">输入参数</div>
                    <div style="width: 100%;height: 97%">
                        <div class="left_top">
                            <div style="height: 5%;width: 100%">基本参数</div>
                            <div style="height: 95%;width: 100%">
                                <div style="height: 5%;width: 100%;position:relative">
                                    <label style="position: absolute;left: 8%">载荷类型</label>
                                    <select v-model="form.load_type" style="position: absolute;left: 18%">
                                        <option value="1">极限载荷</option>
                                        <option value="2">疲劳载荷</option>
                                    </select>
                                    <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
                                        <button v-show="form.load_type==1" style="height:100%;width: 25%;position: absolute;left: 35%;margin-top: -3%">导入轴承极限载荷</button>                                    </a-upload>
                                    <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
                                        <button v-show="form.load_type==2" style="height:100%;width: 25%;position: absolute;left: 35%;margin-top: -3%">导入轴承疲劳载荷</button>
                                    </a-upload>
                                </div>
                                <div style="height: 5%;width: 100%;margin-left: 2%">
                                    <p>注：载荷文件为.xls或.xlsx格式，其各列参数如下表所示(无需表头)</p>
                                </div>
                                <div style="height: 20%;width: 96%;position: relative;top: 3%;left: 2%">
                                    <div v-show="form.load_type==1" class="table">
                                        <tr class="title2">
                                            <th style="width: 10%">序号</th>
                                            <th>Fx(N)</th>
                                            <th>Fy(N)</th>
                                            <th>Fz(N)</th>
                                            <th>Mx(Nm)</th>
                                            <th>My(Nm)</th>
                                        </tr>
                                        <tr class="tbody" v-for="(item,index) in spectrum_n" :key="index">
                                            <td>{{item[0]}}</td>
                                            <td>{{item[1]}}</td>
                                            <td>{{item[2]}}</td>
                                            <td>{{item[3]}}</td>
                                            <td>{{item[4]}}</td>
                                            <td>{{item[5]}}</td>
                                        </tr>
                                    </div>
                                    <div v-show="form.load_type==2" class="table">
                                        <tr class="title1">
                                            <th>序号</th>
                                            <th>Fx(N)</th>
                                            <th>Fy(N)</th>
                                            <th>Fz(N)</th>
                                            <th>Mx(Nm)</th>
                                            <th>My(Nm)</th>
                                            <th>时间占比</th>
                                            <th>转速(rpm)</th>
                                        </tr>
                                        <tr class="tbody" v-for="(item,index) in spectrum_n" :key="index">
                                            <td>{{item[0]}}</td>
                                            <td>{{item[1]}}</td>
                                            <td>{{item[2]}}</td>
                                            <td>{{item[3]}}</td>
                                            <td>{{item[4]}}</td>
                                            <td>{{item[5]}}</td>
                                            <td>{{item[6]}}</td>
                                            <td>{{item[7]}}</td>
                                        </tr>
                                    </div>
                                </div>
                                <div style="height: 64.5%;width: 100%;margin-top: 3%;display: flex">
                                    <div style="height: 100%;width: 40%;display: flex">
                                        <div style="height: 100%;width: 65%">
                                            <ul class="left_text">
                                                <li>轴承内径(mm)</li>
                                                <li>轴承外径(mm)</li>
                                                <li>轴承宽度(mm)</li>
                                                <li>滚动体个数</li>
                                                <li>滚动体直径(mm)</li>
                                                <li>滚动体长度(mm)</li>
                                                <li>滚动体两端圆角半径(mm)</li>
                                                <li>径向游隙(mm)</li>
                                            </ul>
                                        </div>
                                        <div style="height: 100%;width: 35%">
                                            <ul class="left_input">
                                                <li><input v-model="form.d" type="text"></li>
                                                <li><input v-model="form.D" type="text"></li>
                                                <li><input v-model="form.B" type="text"></li>
                                                <li><input v-model="form.Z" type="text"></li>
                                                <li><input v-model="form.Dw" type="text"></li>
                                                <li><input v-model="form.bearing_element_length" type="text"></li>
                                                <li><input v-model="form.bearing_element_fillet" type="text"></li>
                                                <li><input v-model="form.axial_clearance" type="text"></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div style="height: 100%;width: 60%;display: flex">
                                        <div style="height: 100%;width: 50%">
                                            <ul class="right_text">
                                                <li><span v-show="form.load_type==1">轴承转速(rpm)</span></li>
                                                <li>轴承外圈弹性模量(MPa)</li>
                                                <li>轴承外圈泊松比</li>
                                                <li>滚动体弹性模量(MPa)</li>
                                                <li>滚动体泊松比</li>
                                                <li>轴承内圈弹性模量(MPa)</li>
                                                <li>轴承内圈泊松比(MPa)</li>
                                                <li>轴承额定动载荷(N)</li>
                                                <li></li>
                                                <li>轴承额定静载荷(N)</li>
                                                <li></li>
                                            </ul>
                                        </div>
                                        <div style="height: 100%;width: 38%">
                                            <ul class="right_input">
                                                <li><input v-model="form.speed" type="text" v-show="form.load_type==1"></li>
                                                <li><input v-model="form.E_e" type="text"></li>
                                                <li><input v-model="form.v_e" type="text"></li>
                                                <li><input v-model="form.E_b" type="text"></li>
                                                <li><input v-model="form.v_b" type="text"></li>
                                                <li><input v-model="form.E_i" type="text"></li>
                                                <li><input v-model="form.v_i" type="text"></li>
                                                <li style="display: flex">
                                                    <input :disabled="form.radiobutton2==2" v-model="form.C_input" type="text">
                                                    <input v-model="form.radiobutton2" value="1" style="margin-left: 1px;width: 12px" type="radio">手动
                                                </li>
                                                <li>
                                                    <div style="text-align: right;width: 73%;">
                                                        <input v-model="form.radiobutton2" value="2" style="width: 12px;height: 12px" type="radio">自动
                                                    </div>
                                                </li>
                                                <li style="display: flex">
                                                    <input :disabled="form.radiobutton4==2" v-model="form.C0_input" type="text">
                                                    <input v-model="form.radiobutton4" value="1" style="margin-left: 1px;width: 12px;" type="radio">手动
                                                </li>
                                                <li>
                                                    <div style="text-align: right;width: 73%;">
                                                        <input v-model="form.radiobutton4" value="2" style="width: 12px;height: 12px" type="radio">自动
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="left_bottom">
                            <div style="width: 100%;height: 5%">修正参数</div>
                            <div style="width: 100%;height: 95%;display: flex">
                                <div style="width: 45%;height: 100%;display: flex">
                                    <div style="width: 60%;height: 100%">
                                        <ul class="bottom_text">
                                            <li>轴承疲劳极限载荷(N)</li>
                                            <li></li>
                                            <li>润滑油40°C粘度(mm^2/s)</li>
                                            <li>润滑油100°C粘度(mm^2/s)</li>
                                            <li>润滑油工作温度(°C)</li>
                                        </ul>
                                    </div>
                                    <div style="width: 37%;height: 100%;">
                                        <ul class="bottom_input">
                                            <li>
                                                <input v-model="form.Cu_input" :disabled="form.radiobutton8==2" type="text">
                                                <input v-model="form.radiobutton8" style="height: 12px;width: 12px" type="radio" value="1">手动
                                            </li>
                                            <li>
                                                <div style="text-align: right">
                                                    <input v-model="form.radiobutton8" value="2" style="width: 12px;height: 12px" type="radio">自动
                                                </div>
                                            </li>
                                            <li><input v-model="form.v_40" type="text"></li>
                                            <li><input v-model="form.v_100" type="text"></li>
                                            <li><input v-model="form.oil_temperature" type="text"></li>
                                        </ul>
                                    </div>
                                </div>
                                <div style="width: 55%;height: 100%;display: flex">
                                    <div style="width: 45%;height: 100%">
                                        <ul class="bottom_text1">
                                            <li>可靠度(%)</li>
                                            <li>清洁度条件</li>
                                            <li v-show="form.contamination_condition==1">润滑方式</li>
                                            <li v-show="form.contamination_condition==2">污染系数</li>
                                            <li><span v-show="form.contamination_condition==1">清洁度等级</span></li>
                                            <li>是否添加挤压润滑剂</li>
                                            <li>寿命修正系数alSO上限值</li>
                                        </ul>
                                    </div>
                                    <div style="width: 55%;height: 100%">
                                        <ul class="bottom_input1">
                                            <li>
                                                <select v-model="form.reliability" >
                                                    <option value="1">90</option>
                                                    <option value="2">95</option>
                                                    <option value="3">96</option>
                                                    <option value="4">97</option>
                                                    <option value="5">98</option>
                                                    <option value="6">99</option>
                                                    <option value="7">99.2</option>
                                                    <option value="8">99.4</option>
                                                    <option value="9">99.6</option>
                                                    <option value="10">99.8</option>
                                                    <option value="11">99.9</option>
                                                    <option value="12">99.92</option>
                                                    <option value="13">99.94</option>
                                                    <option value="14">99.95</option>
                                                </select>
                                            </li>
                                            <li>
                                                <select v-model="form.contamination_condition" >
                                                    <option value="1">润滑油纯净度按ISO4406已知</option>
                                                    <option value="2">只大体知道清洁度等级</option>
                                                </select>
                                            </li>
                                            <li v-show="form.contamination_condition==1">
                                                <select v-model="form.lubricate_method">
                                                    <option value="1">油润滑，在线过滤</option>
                                                    <option value="2">油润滑，离线过滤或未过滤</option>
                                                    <option value="3">脂润滑</option>
                                                </select>
                                            </li>
                                            <li v-show="form.contamination_condition==2"><input v-model="form.e_C_s"></li>
                                            <li>
                                                <select v-show="form.contamination_condition==1" v-model="form.contamination_level">
                                                    <option value="1">-/13/10,-/12/10,-/11/9,-/12/9</option>
                                                    <option value="2">-/15/12,-/14/12,-/16/12,-/16/13</option>
                                                    <option value="3">-/17/14,-/18/14,-/18/15,-/19/15</option>
                                                    <option value="4">-/19/16,-/18/16,-/20/17,-21/17</option>
                                                    <option value="5">-/21/18,-/21/19,-/22/19,-/23/19</option>
                                                </select>
                                            </li>
                                            <li>
                                                <select v-model="form.pp6">
                                                    <option value="1">是</option>
                                                    <option value="2">否</option>
                                                </select>
                                            </li>
                                            <li><input v-model="form.aISO_limit"></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a-col>
            <a-col span="13" style="height: 100%">
                <div class="right">
                    <div style="width: 100%;height: 3%;background: #D7D7D7">输出参数</div>
                    <div style="width: 100%;height: 97%">
                        <div class="right_top">
                            <div style="width: 100%;height: 5%">结果汇总</div>
                            <div style="width: 100%;height: 45%;position: relative">
                                <div v-show="form.load_type==1" style="width: 100%;height: 100%;display: flex;position: absolute;">
                                    <div style="height:100%;width: 10%;text-align:center;padding-top: 2%;margin-left: 2%">寿命与静强度计算结果</div>
                                    <div class="table1">
                                        <div style="width: 150%;height: 100%">
                                            <tr style="height: 20%;text-align: center;">
                                                <th style="width: 5%">序号</th>
                                                <th>可靠度修正系数a1</th>
                                                <th>寿命修正系数aISO</th>
                                                <th>L10寿命(hr)</th>
                                                <th>Lnm寿命(hr)</th>
                                                <th>L10r寿命(hr)</th>
                                                <th>Lnmr寿命(hr)</th>
                                                <th>当量静载荷(N)</th>
                                                <th>静强度安全系数</th>
                                            </tr>
                                            <tr style="text-align: center" v-for="(item,index) in ans.point_load_spectrum" :key="index">
                                                <th>{{item[0]}}</th>
                                                <th>{{item[1]}}</th>
                                                <th>{{item[2]}}</th>
                                                <th>{{item[3]}}</th>
                                                <th>{{item[4]}}</th>
                                                <th>{{item[5]}}</th>
                                                <th>{{item[6]}}</th>
                                                <th>{{item[7]}}</th>
                                                <th>{{item[8]}}</th>
                                            </tr>
                                        </div>
                                    </div>
                                </div>
                                <div v-show="form.load_type==2" style="width: 100%;height: 100%;display: flex;position: absolute;">
                                    <div style="height:100%;width: 10%;text-align:center;padding-top: 5%;margin-left: 2%">寿命计算结果</div>
                                    <div class="table1" style="overflow-x: hidden">
                                        <div style="width: 100%;height: 100%">
                                            <tr style="height: 20%;text-align: center">
                                                <th>L10寿命(hr)</th>
                                                <th>Lnm寿命(hr)</th>
                                                <th>L10r寿命(hr)</th>
                                                <th>Lnmr寿命(hr)</th>
                                            </tr>
                                            <tr style="text-align: center" v-for="(item,index) in ans.result_life_spectrum" :key="index">
                                                <th>{{item[0]}}</th>
                                                <th>{{item[1]}}</th>
                                                <th>{{item[2]}}</th>
                                                <th>{{item[3]}}</th>
                                            </tr>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%;height: 50%;display: flex">
                                <div style="margin-left:1%;width: 48%;height: 100%;display: flex">
                                    <div style="padding-top: 10%;margin-left: 2%; width: 60%;text-align: center">内圈最大接触应力(MPa)</div>
                                    <div class="table1" style="overflow-x: hidden;height: 80%;margin-top: 3%">
                                        <div style="width: 100%;height: 100%">
                                            <tr style="height: 20%;text-align: center;">
                                                <th>序号</th>
                                                <th>应力(MPa)</th>
                                            </tr>
                                            <tr style="text-align: center" v-for="(item,index) in ans.stress_all_spectrum" :key="index">
                                                <th>{{item[0]}}</th>
                                                <th>{{item[1]}}</th>
                                            </tr>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-left:1%;width: 48%;height: 100%;display: flex">
                                    <div style="padding-top: 10%;margin-left: 2%; width: 60%;text-align: center">外圈最大接触应力(MPa)</div>
                                    <div class="table1" style="overflow-x: hidden;height: 80%;margin-top: 3%">
                                        <div style="width: 100%;height: 100%">
                                            <tr style="height: 20%;text-align: center;">
                                                <th>序号</th>
                                                <th>应力(MPa)</th>
                                            </tr>
                                            <tr style="text-align: center" v-for="(item,index) in ans.w_max_spectrum" :key="index">
                                                <th>{{item[0]}}</th>
                                                <th>{{item[1]}}</th>
                                            </tr>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right_middle" style="height: 50%">
                            <div style="width: 100%;height: 5%">中间结果</div>
                            <ul style="width: 100%;height: 95%">
                                <li style="width: 100%;height: 20%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                                    <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">最大接触应力(MPa)</div>
                                    <div style="width: 85%;height: 100%">
                                        <div class="table1" style="overflow-x: hidden">
                                            <div style="width: 100%;height: 100%">
                                                <tr style="height: 20%;text-align: center">
                                                    <th>序号</th>
                                                    <th>滚动体序号</th>
                                                    <th>内圈</th>
                                                    <th>外圈</th>
                                                </tr>
                                                <tr style="text-align: center" v-for="(item,index) in ans.qj_all_spectrum" :key="index">
                                                    <th>{{item[0]}}</th>
                                                    <th>{{item[1]}}</th>
                                                    <th>{{item[2]}}</th>
                                                    <th>{{item[3]}}</th>
                                                </tr>
                                            </div>
                                        </div>
                                    </div>
                                </div></li>
                                <li style="width: 100%;height: 20%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                                    <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">接触半宽(mm)</div>
                                    <div style="width: 85%;height: 100%">
                                        <div class="table1" style="overflow-x: hidden">
                                            <div style="width: 100%;height: 100%">
                                                <tr style="height: 20%;text-align: center">
                                                    <th>序号</th>
                                                    <th>滚动体序号</th>
                                                    <th>内圈</th>
                                                    <th>外圈</th>
                                                </tr>
                                                <tr style="text-align: center" v-for="(item,index) in ans.semi_minor_all_spectrum" :key="index">
                                                    <th>{{item[0]}}</th>
                                                    <th>{{item[1]}}</th>
                                                    <th>{{item[2]}}</th>
                                                    <th>{{item[3]}}</th>
                                                </tr>
                                            </div>
                                        </div>
                                    </div>
                                </div></li>
                                <li style="width: 100%;height: 20%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                                    <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">滚动体法向载荷(N)</div>
                                    <div style="width: 75%;height: 100%">
                                        <div class="table1" style="overflow-x: hidden">
                                            <div style="width:100%;height: 100%">
                                                <tr style="height: 10%;text-align: center">
                                                    <th>序号</th>
                                                    <th>滚动体序号</th>
                                                    <th>法向载荷(N)</th>
                                                </tr>
                                                <tr style="text-align: center" v-for="(item,index) in ans.qj_all_max_spectrum" :key="index">
                                                    <th>{{item[0]}}</th>
                                                    <th>{{item[1]}}</th>
                                                    <th>{{item[2]}}</th>
                                                </tr>
                                            </div>
                                        </div>
                                    </div>
                                </div></li>
                                <li style="width: 100%;height: 20%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                                    <div style="width: 18%;height: 100%;text-align: center;margin-top: 2%">滚动体最大法向载荷(N)</div>
                                    <div style="width: 65%;height: 100%">
                                        <div class="table1" style="overflow-x: hidden">
                                            <div style="width: 100%;height: 100%">
                                                <tr style="height: 20%;text-align: center">
                                                    <th>序号</th>
                                                    <th>最大法向载荷(N)</th>
                                                </tr>
                                                <tr style="text-align: center" v-for="(item,index) in ans.stress_all_spectrum" :key="index">
                                                    <th>{{item[0]}}</th>
                                                    <th>{{item[1]}}</th>
                                                </tr>
                                            </div>
                                        </div>
                                    </div>
                                </div></li>
                            </ul>
                        </div>
                        <div style="width: 100%;height: 10%">
                            <button @click="tclick6" style="width: 10%;height: 50%;margin-top: 1%;margin-left: 2%">计算</button>
                        </div>
                    </div>
                </div>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import {filetext, firedelete, namemodule_thrust_rollerbearing_cal_last_z} from "@/api/file";
    export default {
        created() {
            document.title = '单向/双向推力圆柱滚子轴承滚动体受载与寿命计算'
            this.$store.state.file.key=34

        },
      mounted(){
        //绑定页面退出事件
        window.onbeforeunload= (e)=>{
          e = e || window.event;
          if (e) {
            e.returnValue = '关闭提示';
          }
          this.delete()//调用自己的方法
          // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
          return '关闭提示';
        };
      },
        name: "namemodule_thrust_rollerbearing_cal_last_z",
        data(){
            return{
              form2:{
                uuids:[]
              },
                form:this.$store.state.file.dataList[34],
                // spectrum_n:[[1,0,-9000,0,0,0]],
                spectrum_n:[[]],
                ans:{
                    C:"",
                    C0:"",
                    Cu:"",
                    life_fatigue_total:"",
                    result_life_spectrum:"",
                    point_load_spectrum:"",
                    n_max_spectrum:"",
                    w_max_spectrum:"",
                    stress_all_spectrum:"",
                    semi_minor_all_spectrum:"",
                    qj_all_spectrum:"",
                    qj_all_max_spectrum:"",
                },
            };
        },
        methods:{
          //删除载荷谱
          async delete(){
            this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
            await firedelete(this.form2).then(res => {
              console.log(res);
            })
          },
            customRequest(data)
            {
                const formData = new FormData()
                formData.append('fileName', data.file)
                filetext(formData)
                    .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                        console.log(res)
                        this.spectrum_n=res.data.filedata;
                        this.form.uuid=res.data.uuid;
                      this.form2.uuids.push(res.data.uuid);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            tclick6()
            {
                this.form.spectrum_n=this.spectrum_n.toString();
                namemodule_thrust_rollerbearing_cal_last_z(this.form)
                    .then(res => {
                        console.log("打印结果");
                        console.log(res)
                        this.ans=res;
                    })
                    .catch(err => {
                        this.$message.error(err);
                    });
            },
        }
    }
</script>

<style scoped>
    .all
    {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: auto;
    }
    .left,.right
    {
        width: 96%;
        height: 96%;
        margin-top: 2%;
        margin-left: 2%;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
    }
    .left_top
    {
        height: 69%;
        width: 98%;
        margin-left: 1%;
        margin-top: 1%;
        padding: 2px;
        border-width: 2px;
        border-style: solid;
        border-color: rgba(121, 121, 121, 1);
        border-radius: 8px;
    }
    .title1,.title2
    {
        background: #D7D7D7;
        width: 100%;
        height: 10%;
        text-align: center;
    }
    .title1 th
    {
        width: 10%;
        border: 1px solid grey;
    }
    .title2 th
    {
        width: 21%;
        border: 1px solid grey;
    }
    .table
    {
        height: 100%;
        width: 100%;
        background: #D7D7D7;
        border: 1px solid grey;
        position: absolute;
        overflow-y: scroll;
    }
    .tbody
    {
        text-align: center;
    }

    tr:nth-child(odd)  {
        background-color:#D7D7D7;
    }

    tr:nth-child(even){
        background-color:#f1f1f1;
    }
    .left_text
    {
        width: 100%;
        height: 100%;
        text-align: right;
    }
    .left_text li
    {
        width: 100%;
        height: 12.5%;
    }
    .left_input
    {
        width: 100%;
        height: 100%;
        margin-left: 10%;
    }
    .left_input li
    {
        width: 100%;
        height: 12.5%;
    }
    .left_input input
    {
        width: 70%;
        height: 80%;
    }
    .right_text
    {
        width: 100%;
        height: 100%;
    }
    .right_text li
    {
        text-align: right;
        height: 9%;
        width: 100%;
    }
    .right_input
    {
        width: 100%;
        height: 100%;
        margin-left: 8%;
    }
    .right_input li
    {
        height: 9%;
        width: 100%;
    }
    .right_input input
    {
        width: 45%;
        height: 96%;
    }
    .left_bottom
    {
        height: 28%;
        width: 98%;
        margin-left: 1%;
        margin-top: 1%;
        padding: 2px;
        border-width: 2px;
        border-style: solid;
        border-color: rgba(121, 121, 121, 1);
        border-radius: 8px;
    }
    .bottom_text
    {
        width: 100%;
        height: 100%;
        text-align: right;
        margin-top: 5%;
    }
    .bottom_text li,.bottom_input li
    {
        height: 15%;
        width: 100%;
        font-size: 13px;
    }
    .bottom_input
    {
        height: 100%;
        width: 100%;
        margin-top:9%;
        margin-left: 5%;
    }
    .bottom_input input
    {
        height: 90%;
        width: 62%;
    }
    .bottom_text1
    {
        width: 100%;
        height: 100%;
        text-align: right;
    }
    .bottom_text1 li
    {
        width: 100%;
        height: 16%;
    }
    .bottom_input1
    {
        width: 100%;
        height: 100%;
        margin-left: 5%;
    }
    .bottom_input1 li
    {
        width: 100%;
        height: 16%;
    }
    .bottom_input1 select,.bottom_input1 input
    {
        height: 75%;
        width: 34%;
    }
    .right
    {
        width: 96%;
        height: 96.3%;
        margin-top: 1.7%;
        margin-left: 2%;
        box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
    }
    .right_top,.right_middle
    {
        height: 40%;
        width: 98%;
        padding: 2px;
        border-width: 2px;
        border-style: solid;
        border-color: rgba(121, 121, 121, 1);
        border-radius: 8px;
        margin-top: 1%;
        margin-left: 1%;
    }
    .table1
    {
        height: 90%;
        width: 87%;
        overflow: scroll;
    }
    .table1 th
    {
        width: 10%;
    }
    .table1,th,tr,td
    {
        border: 1px solid grey;
    }
</style>